<template>
  <div class="container">
    <div style="border-bottom:1px solid #ccc;padding-bottom:50px">
      <div class="card_nd_title">
        <span>量表评估</span>
        <div class="line" style="width:64px;"></div>
      </div>
      <div class="content_box">
        <div class="card_content" v-if="hasDisease">
          <div class="item">
            <span style="font-size:16px;color:#000;font-weight:bold">疾病评估</span>
          </div>
          <div class="content_item" v-if="report.angiocardiopathyReport">
            <div class="item">心血管10年风险评估</div>
            <div>
              <div div="item">评估时间：{{ report.angiocardiopathyReport.evaluationTime }}</div>
              <a-row style="margin-bottom:30px">
                <a-col :span="6">评估结果：</a-col>
                <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                  {{ report.angiocardiopathyReport.result }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="content_item" v-if="report.diabetesReport">
            <div class="item">糖尿病风险评估</div>
            <div>
              <div class="item">评估时间：{{ report.diabetesReport.evaluationTime }}</div>
              <a-row style="margin-bottom:30px">
                <a-col :span="6">评估结果：</a-col>
                <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                  {{ report.diabetesReport.result }}
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
        <div class="card_content" v-if="hasBeha">
          <div class="item">
            <span style="font-size:16px;color:#000;font-weight:bold">行为评估</span>
          </div>
          <div class="content_item" v-if="report.sdscaReport">
            <div class="item">自我管理行为(SDSCA)评估</div>
            <div>
              <div class="item">评估时间：{{ report.sdscaReport.evaluationTime }}</div>
              <a-row style="margin-bottom:30px">
                <a-col :span="6">评估结果：</a-col>
                <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                  {{ report.sdscaReport.result }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="content_item" v-if="report.bmqReport">
            <div class="item">服药信念量表（BMQ）评估</div>
            <div>
              <div class="item">评估时间：{{ report.bmqReport.evaluationTime }}</div>
              <a-row style="margin-bottom:30px">
                <a-col :span="6">评估结果：</a-col>
                <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                  {{ report.bmqReport.result }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="content_item" v-if="report.mmas8Report">
            <div class="item">Morisky用药依从性问卷（MMAS-8）评估</div>
            <div>
              <div class="item">评估时间：{{ report.mmas8Report.evaluationTime }}</div>
              <a-row style="margin-bottom:30px">
                <a-col :span="6">评估结果：</a-col>
                <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                  {{ report.mmas8Report.result }}
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
        <div class="card_content" v-if="hasMind">
          <div class="item">
            <span style="font-size:16px;color:#000;font-weight:bold">心理评估</span>
          </div>
          <div class="content_item" v-if="report.sasReport">
            <div class="item">焦虑自评（SAS）</div>
            <div>
              <div class="item">评估时间：{{ report.sasReport.evaluationTime }}</div>
              <a-row style="margin-bottom:30px">
                <a-col :span="6">评估结果：</a-col>
                <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                  {{ report.sasReport.result }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="content_item" v-if="report.sdsReport">
            <div class="item">抑郁自评（SDS）</div>
            <div>
              <div class="item">评估时间：{{ report.sdsReport.evaluationTime }}</div>
              <a-row style="margin-bottom:30px">
                <a-col :span="6">评估结果：</a-col>
                <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                  {{ report.sdsReport.result }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="content_item" v-if="report.jobReport">
            <div class="item">马氏工作倦怠通用量表</div>
            <div>
              <div class="item">评估时间：{{ report.jobReport.evaluationTime }}</div>
              <a-row style="margin-bottom:30px">
                <a-col :span="6">评估结果：</a-col>
                <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                  {{ report.jobReport.result }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="content_item" v-if="report.sleepReport">
            <div class="item">匹兹堡睡眠评估</div>
            <div>
              <div class="item">评估时间：{{ report.sleepReport.evaluationTime }}</div>
              <a-row style="margin-bottom:30px">
                <a-col :span="6">评估结果：</a-col>
                <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                  {{ report.sleepReport.result }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="content_item" v-if="report.happyReport">
            <div class="item">总体幸福感测试</div>
            <div>
              <div class="item">评估时间：{{ report.happyReport.evaluationTime }}</div>
              <a-row style="margin-bottom:30px">
                <a-col :span="6">评估结果：</a-col>
                <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                  {{ report.happyReport.result }}
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Evaluation',
  props: ['report'],
  data() {
    return {}
  },
  computed: {
    hasDisease() {
      return this.report.angiocardiopathyReport || this.report.diabetesReport
    },
    hasBeha() {
      return this.report.sdscaReport || this.report.bmqReport || this.report.mmas8Report
    },
    hasMind() {
      return (
        this.report.sasReport ||
        this.report.sdsReport ||
        this.report.jobReport ||
        this.report.sleepReport ||
        this.report.happyReport
      )
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }
@media print {
  .container {
    page-break-after: always;
    page-break-inside: avoid;
  }
}
.container {
  padding: 50px 24px 0 24px;
}

.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.content_box {
  column-count: 2;
}
.card_content {
  break-inside: avoid;
  // display: inline-block;
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
.item {
  margin-bottom: 20px;
}
.content_item {
  margin-bottom: 30px;
  border-bottom: 1px solid #ccc;
}
.content_item:last-child {
  border-bottom: none;
}
</style>

